<template>
  <div class="containter">
    <div class="step">
      <ol class="titt">
        <el-badge
          :value="item.num"
          :max="99"
          :hidden="item.num == 0 || item.num == 'a'"
          class="item tittItem"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-button
            class="button"
            size="mini"
            :class="activeIndex == index ? 'cur' : ''"
            :disabled="item.num == 0"
            @click="goAssignBlock('panelRef' + index, 100, index)"
          >{{ item.text }}</el-button>
        </el-badge>
      </ol>
    </div>
    <div
      ref="panelRef0"
      class="basicInfo basicInfo1"
    >
      <p class="title">工商信息</p>
      <!-- <el-table
        :data="gsxxData"
        style="width: 100%"
        :show-header="false"
        border
        :cell-style="cellStyle"
        :span-method="arraySpanMethod"
      >
        <el-table-column prop="col1" width="180" align="center">
        </el-table-column>
        <el-table-column prop="col2">
          <template slot-scope="scope">
            <el-tooltip
              placement="top"
              v-model="scope.row.showTooltip"
              :open-delay="500"
              effect="dark"
              :disabled="!scope.row.showTooltip"
            >
              <div slot="content">{{ scope.row.col2 }}</div>
              <div @mouseenter="showTips($event, scope.row)" class="myNote">
                {{ scope.row.col2 }}
              </div>
            </el-tooltip>
            <span
              @click.stop="_copy(scope.row.col2)"
              v-if="scope.row.col1 == '企业名称'"
              >{{ scope.row.col2 }}<i class="el-icon-document-copy"></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="col3"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column prop="col4">
          <template slot-scope="scope">
            <span
              @click.stop="_copy(scope.row.col4)"
              v-if="scope.row.col3 == '地址'"
              >{{ scope.row.col4 }}<i class="el-icon-document-copy"></i
            ></span>
            <span v-else>{{ scope.row.col4 }}</span>
            <span
              @click.stop="_copy(scope.row.col4)"
              v-if="scope.row.col3 == '社会统一信用代码'"
              ><i class="el-icon-document-copy"></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="col5"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column prop="col6"></el-table-column>
      </el-table> -->
      <table
        class="table"
        style="table-layout: fixed"
      >
        <tr>
          <th>企业名称</th>
          <td
            @mouseleave="isShowyc"
            @mouseenter="isShowyr"
          >
            <div class="cursorCla">
              <span>{{ comInfo.qymc }}</span>
              <i
                v-if="isShow"
                class="el-icon-document-copy"
                @click="_copy(comInfo.qymc)"
              >复制</i>
            </div>
          </td>
          <th>{{ handelCode(comInfo.shtyxydm) }}</th>
          <td
            @mouseleave="isShowycTwo"
            @mouseenter="isShowyrTwo"
          >
            <div class="cursorCla">
              <span>{{ comInfo.shtyxydm }}</span>
              <i
                v-if="isShowTwo"
                class="el-icon-document-copy"
                @click="_copy(comInfo.shtyxydm)"
              >复制</i>
            </div>
          </td>
          <th>法定代表人</th>
          <td>{{ comInfo.fddbr }}</td>
        </tr>
        <tr>
          <th>企业类型</th>
          <td>{{ comInfo.qylx ? comInfo.qylx.trim() : '' }}</td>
          <th>经营状态</th>
          <td>{{ comInfo.djzt }}</td>
          <th>所属区域</th>
          <td>{{ comInfo.ssqu }}</td>
        </tr>
        <tr>
          <th>注册资本</th>
          <td>{{ comInfo.zczb }}</td>
          <th>登记机关</th>
          <td>{{ comInfo.spdw }}</td>
          <th>所属行业</th>
          <td>{{ comInfo.sshy }}</td>
        </tr>
        <tr>
          <th>成立日期</th>
          <td>{{ comInfo.clrq | dateFilter }}</td>
          <th>经营期限（起）</th>
          <td>{{ comInfo.jyqsrq | dateFilter }}</td>
          <th>经营期限（止）</th>
          <td>{{ comInfo.jyjzrq | dateFilter }}</td>
        </tr>
        <tr>
          <th>联系方式</th>
          <td>{{ comInfo.dh }}</td>
          <th>地址</th>
          <td
            :colspan="3"
            @mouseleave="isShowycTree"
            @mouseenter="isShowyrTree"
          >
            <div class="cursorCla">
              <span>{{ comInfo.jycs }}</span>
              <i
                v-if="isShowTree"
                class="el-icon-document-copy"
                @click="_copy(comInfo.jycs)"
              >复制</i>
            </div>
          </td>
        </tr>
        <tr>
          <th>经营范围</th>
          <td
            colspan="5"
            :title="comInfo.jyfw"
          >
            <div class="jyfw cursorCla">{{ comInfo.jyfw }}</div>
          </td>
        </tr>
      </table>
    </div>
    <div
      v-if="false"
      ref="panelRef1"
      class="basicInfo basicInfo2"
    >
      <p class="title">股东信息</p>
      <el-table
        :data="gdData"
        v-loading="gdLoading"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gdxm"
          label="股东"
          width="300"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gdlx"
          label="股东类型"
          width="300"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="zzgbbl"
          label="持股比例"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cgje"
          label="实缴金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rjje"
          label="认缴金额"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      v-if="false"
      ref="panelRef2"
      class="basicInfo basicInfo3"
    >
      <p class="title">高管信息</p>
      <el-table
        :data="ggData"
        v-loading="ggLoading"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xm"
          label="姓名"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.xm
            }}<span
              @click="handelCheckCompany(scope.row.xm, scope.row.zjhm)"
              class="glqy"
            >
              关联企业>></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zw"
          label="职务"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      v-if="false"
      ref="panelRef3"
      class="basicInfo basicInfo4"
    >
      <p class="title">分支机构</p>
      <el-table
        :data="jgData"
        v-loading="jgLoading"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="QYMC"
          label="机构名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FDDBR"
          label="法定代表人"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.FDDBR
            }}<span
              @click="handelCheckCompany(scope.row.FDDBR, scope.row.SFZJHM)"
              class="glqy"
            >
              关联企业>></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="CLRQ"
          label="成立日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="DJZT"
          label="经营状态"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      v-if="false"
      ref="panelRef4"
      class="basicInfo basicInfo5"
    >
      <p class="title">对外投资</p>
      <el-table
        :data="qydwData"
        v-loading="qyLoading"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TZQYMC"
          label="机构名称"
          width="200"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FRXM"
          label="被投资企业法定代表人"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.FRXM
            }}<span
              @click="handelCheckCompany(scope.row.FRXM, scope.row.sfz)"
              class="glqy"
            >
              关联企业>></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="CLRQ"
          label="成立日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="CGBL"
          label="股权占比"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="DJZT"
          label="企业状态"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <!-- <div ref="panelRef5" class="basicInfo basicInfo6">
            <p class="title">法人对外投资 </p>
            <el-table :data="frdwData" v-loading="frLoading" style="width: 100%"  :header-cell-style="{background:'#f2f9fe'}">
                <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
                <el-table-column prop="TZQYMC" label="机构名称"  align="center"></el-table-column>
                <el-table-column prop="FRXM" label="被投资企业法定代表人"  align="center">
                    <template slot-scope="scope">
                        {{scope.row.FRXM}}<span @click="handelCheckCompany(scope.row.FRXM,scope.row.sfz)" class="glqy"> 关联企业>></span>
                    </template>
                </el-table-column>
                <el-table-column prop="CLRQ" label="成立日期"  align="center"></el-table-column>
                <el-table-column prop="CGBL" label="股权占比"  align="center"></el-table-column>
                <el-table-column prop="DJZT" label="企业状态"  align="center"></el-table-column>
            </el-table>
        </div> -->
    <div
      ref="panelRef5"
      class="basicInfo basicInfo7"
    >
      <p class="title">
        <span>工商变更</span><span
          @click="handelCheckBusiness"
          class="glqy"
        >查看更多信息>></span>
      </p>
      <el-table
        :data="gsData"
        style="width: 100%"
        v-loading="loading1"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="BGRQ"
          label="变更日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="BGSX"
          label="变更事项"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="BGQSX"
          label="变更前内容"
          width="300"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.BGQSX"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="BGHSX"
          label="变更后内容"
          width="300"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.BGHSX"></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="查看更多工商变更信息"
      :visible.sync="dialogVisible1"
      width="70%"
      custom-class="dialog"
    >
      <el-table
        :data="gsMoreData"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ (pagination1.page - 1) * 10 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="BGRQ"
          label="变更日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="BGSX"
          label="变更事项"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="BGQSX"
          label="变更前内容"
          width="300"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.BGQSX"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="BGHSX"
          label="变更后内容"
          width="300"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.BGHSX"></span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          background
          :current-page.sync="pagination1.page"
          :total="pagination1.total"
          @current-change="gsChange"
        ></el-pagination>
      </div>
    </el-dialog>
    <div
      v-if="false"
      ref="panelRef6"
      class="basicInfo basicInfo7"
    >
      <p class="title">
        <span>诚实守信红名单</span><span
          @click="handelCheckRed"
          class="glqy"
        >查看更多信息>></span>
      </p>
      <el-table
        :data="redData"
        style="width: 100%"
        v-loading="loading2"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RDWH"
          label="认定文号"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RDYJ"
          label="认定依据"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="CSSXSS"
          label="诚实守信事实"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RDRQ"
          label="认定日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RDBMQC"
          label="认定部门"
          width="200"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="查看更多诚实守信红名单"
      :visible.sync="dialogVisible2"
      width="70%"
      custom-class="dialog"
    >
      <el-table
        :data="redMoreData"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ (pagination2.page - 1) * 10 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="RDWH"
          label="认定文号"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RDYJ"
          label="认定依据"
          width="200"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="CSSXSS"
          label="诚实守信事实"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RDRQ"
          label="认定日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RDBMQC"
          label="认定部门"
          align="center"
        ></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          background
          :current-page.sync="pagination2.page"
          :total="pagination2.total"
          @current-change="redChange"
        ></el-pagination>
      </div>
    </el-dialog>
    <!-- 社会法人表彰信息 -->
    <div
      v-if="false"
      ref="panelRef7"
      class="basicInfo basicInfo7"
    >
      <p class="title">
        <span>社会法人表彰信息</span><span
          @click="handelCheckRedTwo"
          class="glqy"
        >查看更多信息>></span>
      </p>
      <el-table
        :data="shData"
        style="width: 100%"
        v-loading="loading3"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="bzmc"
          label="表彰名称"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rydj"
          label="荣誉等级"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rynr"
          label="荣誉内容"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rdrq"
          label="认定日期"
          align="center"
        />
        <el-table-column
          prop="rdbmqc"
          label="认定部门"
          align="center"
        />
      </el-table>
    </div>
    <el-dialog
      title="查看更多社会法人表彰信息"
      :visible.sync="dialogVisible3"
      width="70%"
      custom-class="dialog"
    >
      <el-table
        :data="shMoreData"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ (pagination3.page - 1) * 10 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="bzmc"
          label="表彰名称"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rydj"
          label="荣誉等级"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rynr"
          label="荣誉内容"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rdrq"
          label="认定日期"
          align="center"
        />
        <el-table-column
          prop="rdbmqc"
          label="认定部门"
          align="center"
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          background
          :current-page.sync="pagination3.page"
          :total="pagination3.total"
          @current-change="redChangeTwo"
        ></el-pagination>
      </div>
    </el-dialog>
    <!-- 行政奖励信息 -->
    <div
      ref="panelRef8"
      class="basicInfo basicInfo7"
      v-if="false"
    >
      <p class="title">
        <span>行政奖励信息</span><span
          @click="handelCheckXzjl"
          class="glqy"
        >查看更多信息>></span>
      </p>
      <el-table
        :data="xzjlData"
        style="width: 100%"
        v-loading="loading4"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="jlmc"
          label="奖励名称"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jlsx"
          label="奖励事项"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jljb"
          label="奖励级别"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jlsyrq"
          label="奖励授予日期"
          align="center"
        />
      </el-table>
    </div>
    <el-dialog
      title="查看更多行政奖励信息"
      :visible.sync="dialogVisible4"
      width="70%"
      custom-class="dialog"
    >
      <el-table
        :data="xzjlMoreData"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ (pagination4.page - 1) * 10 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="jlmc"
          label="奖励名称"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jlsx"
          label="奖励事项"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jljb"
          label="奖励级别"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jlsyrq"
          label="奖励授予日期"
          align="center"
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          background
          :current-page.sync="pagination4.page"
          :total="pagination4.total"
          @current-change="xzjlPageChange"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGdxx,
  getGgxx,
  fzjg,
  qyDwtz,
  frDwtz,
  gsbg,
  cssxhmd,
  shfrbz,
  getXzjlInfo
} from '@/api/portay'
export default {
  props: ['qylxOptions', 'comInfo'],
  data() {
    return {
      isShow: false,
      isShowTwo: false,
      isShowTree: false,
      activeIndex: 'a',
      list: [
        { text: '工商信息', num: 'a', disabled: false },
        // { text: '股东信息', disabled: false },
        // { text: '高管信息', disabled: false },
        // { text: '分支机构', disabled: false },
        // {text:'企业对外投资',disabled:false},
        // { text: '对外投资', disabled: false },
        // {text:'法人对外投资',disabled:false},
        { text: '工商变更', disabled: false },
        // { text: '诚实守信红名单', disabled: false },
        // { text: '社会法人表彰信息', disabled: false },
        //{ text: '行政奖励信息', disabled: false },
      ],
      gsxxData: [],
      gdLoading: false,
      gdData: [],
      ggLoading: false,
      ggData: [],
      jgLoading: false,
      jgData: [],
      qyLoading: false,
      qydwData: [],
      frLoading: false,
      frdwData: [],
      loading1: false,
      gsData: [],
      dialogVisible1: false,
      pagination1: { page: 1, total: 0 },
      gsMoreData: [],
      loading2: false,
      redData: [],
      dialogVisible2: false,
      pagination2: { page: 1, total: 0 },
      redMoreData: [],
      loading3: false,
      shData: [],
      dialogVisible3: false,
      pagination3: { page: 1, total: 0 },
      shMoreData: [],
      loading4:false,
      dialogVisible4:false,
      xzjlData:[],
      xzjlMoreData: [],
      pagination4: { page: 1, total: 0 },
    }
  },
  filters: {
    qylxFilter(val, option) {
      if (!val) return ''
      return option
        .filter((item) => item.value == val)
        .map((ite) => ite.label)[0]
    },
    dateFilter(val) {
      if (!val) return ''
      let tt = new Date(val)
      if (tt == 'Invalid Date') return val
      let mm =
        tt.getMonth() + 1 > 9 ? tt.getMonth() + 1 : '0' + (tt.getMonth() + 1)
      let dd = tt.getDate() > 9 ? tt.getDate() : '0' + tt.getDate()
      return tt.getFullYear() + '-' + mm + '-' + dd
    },
  },
  created() {
    let comInfo = this.comInfo
    this.gsxxData = [
      {
        col1: '企业名称',
        col2: comInfo.qymc,
        col3: this.handelCode(comInfo.shtyxydm),
        col4: comInfo.shtyxydm,
        col5: '法定代表人',
        col6: comInfo.fddbr,
        showTooltip: false,
      },
      {
        col1: '企业类型',
        col2: comInfo.qylx,
        col3: '经营状态',
        col4: comInfo.djzt,
        col5: '所属区域',
        col6: comInfo.ssqu,
      },
      {
        col1: '注册资本',
        col2: comInfo.zczb,
        col3: '登记机关',
        col4: comInfo.spdw,
        col5: '所属行业',
        col6: comInfo.sshy,
      },
      {
        col1: '成立日期',
        col2: this.dateFilter(comInfo.clrq),
        col3: '经营期限（起）',
        col4: this.dateFilter(comInfo.jyqsrq),
        col5: '经营期限（止）',
        col6: this.dateFilter(comInfo.jyjzrq),
      },
      { col1: '联系方式', col2: comInfo.dh, col3: '地址', col4: comInfo.jycs },
      { col1: '经营范围', col2: comInfo.jyfw, showTooltip: false },
    ]
  },
  mounted() {},
  watch: {
    comInfo: {
      handler(newVal, oldVal) {
        if (newVal.shtyxydm) {
          console.log('comInfo',newVal)
          for(let i in newVal){
            if(newVal[i] == null){
              newVal[i] = '-'
            }
            if(i == 'zczb' && newVal[i] != null){
              newVal[i] = newVal[i] + '(万元)'
            }
          }
          this.gsbg()
          // this.getGd()
          // this.getGgxx()
          // this.fzjg()
          // this.qyDwtz()
          // this.getRed()
          // this.getSh()
          // this.frDwtz();
          //this.getXzjlInfo()
        }
      },
      //deep: true,
      immediate: true,
    },
  },
  methods: {
    // 复制操作
    _copy(val) {
      this.$copyText(val).then(() => {
        this.$message.success('复制成功')
      })
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 4) {
        if (columnIndex == 3) {
          return [1, 3]
        }
      }
      if (rowIndex == 5) {
        if (columnIndex == 1) {
          return [1, 5]
        }
      }
    },
    cellStyle(row, column, rowIndex, columnIndex) {
      if (row.columnIndex % 2 == 0) {
        return { 'background-color': '#f2f9fe' }
      }
    },
    showTips(obj, row) {
      if (row.col1 == '经营范围') {
        /*obj为鼠标移入时的事件对象*/
        /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
        // let TemporaryTag = document.createElement('span');
        // TemporaryTag.innerText = row.col2;
        // TemporaryTag.className = 'getTextWidth';
        // document.querySelector('body').appendChild(TemporaryTag);
        // let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
        // document.querySelector('.getTextWidth').remove();
        // /*cellWidth为表格容器的宽度*/
        // const cellWidth = obj.target.offsetWidth
        // /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
        // currentWidth <= (3*cellWidth) ? row.showTooltip = false : row.showTooltip = true
        row.showTooltip = true
      }
    },
    dateFilter(val) {
      if (!val) return ''
      let tt = new Date(val)
      if (tt == 'Invalid Date') return val
      let mm =
        tt.getMonth() + 1 > 9 ? tt.getMonth() + 1 : '0' + (tt.getMonth() + 1)
      let dd = tt.getDate() > 9 ? tt.getDate() : '0' + tt.getDate()
      return tt.getFullYear() + '-' + mm + '-' + dd
    },
    //判断是否为统一社会信用代码
    handelCode(val) {
      if (val.length == 18 && val.startsWith('91')) {
        return '统一社会信用代码'
      } else {
        return '工商注册号'
      }
    },
    isShowyc() {
      this.isShow = false
    },
    isShowyr() {
      this.isShow = true
    },
    isShowyrTwo() {
      this.isShowTwo = true
    },
    isShowycTwo() {
      this.isShowTwo = false
    },
    isShowyrTree() {
      this.isShowTree = true
    },
    isShowycTree() {
      this.isShowTree = false
    },
    //股东信息
    getGd() {
      this.gdLoading = true
      let index = this.list.findIndex((item) => item.text == '股东信息')
      getGdxx({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        this.gdLoading = false
        this.gdData = res.data
        this.list[index].num = res.data.length
      })
    },
    //高管信息
    getGgxx() {
      this.ggLoading = true
      let index = this.list.findIndex((item) => item.text == '高管信息')
      getGgxx({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        this.ggLoading = false
        this.ggData = res.data
        this.list[index].num = res.data.length
      })
    },
    //分支机构
    fzjg() {
      this.jgLoading = true
      let index = this.list.findIndex((item) => item.text == '分支机构')
      fzjg({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        this.jgLoading = false
        this.jgData = res.data
        this.list[index].num = res.data.length
      })
    },
    //企业对外投资
    qyDwtz() {
      this.qyLoading = true
      let index = this.list.findIndex((item) => item.text == '对外投资')
      qyDwtz({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        this.qyLoading = false
        this.qydwData = res.data
        this.list[index].num = res.data.length
      })
    },
    //法人对外投资
    frDwtz() {
      this.frLoading = true
      let index = this.list.findIndex((item) => item.text == '法人对外投资')
      frDwtz({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        this.frLoading = false
        this.frdwData = res.data
        this.list[index].num = res.data.length
      })
    },
    //查看关联企业
    handelCheckCompany(name) {
      this.$emit('handelCheckCompany', name)
    },
    //工商变更信息
    gsbg() {
      this.loading1 = true
      let index = this.list.findIndex((item) => item.text == '工商变更')
      gsbg({ TYSHXYDM: this.comInfo.shtyxydm, pageNum: 1, pageSize: 10 }).then(
        (res) => {
          this.loading1 = false
          this.gsData = res.data.records
          this.list[index].num = res.data.total
        }
      )
    },
    //查看更多工商信息
    handelCheckBusiness() {
      this.dialogVisible1 = true
      this.pagination1.page = 1
      gsbg({ TYSHXYDM: this.comInfo.shtyxydm, pageNum: 1, pageSize: 10 }).then(
        (res) => {
          this.gsMoreData = res.data.records
          this.pagination1.total = Number(res.data.total)
        }
      )
    },
    //查看更多工商信息分页
    gsChange(val) {
      this.pagination1.page = val
      gsbg({
        TYSHXYDM: this.comInfo.shtyxydm,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.gsMoreData = res.data.records
      })
    },
    //诚实守信红名单
    getRed() {
      this.loading2 = true
      let index = this.list.findIndex((item) => item.text == '诚实守信红名单')
      cssxhmd({
        TYSHXYDM: this.comInfo.shtyxydm,
        pageNum: 1,
        pageSize: 2,
      }).then((res) => {
        this.loading2 = false
        this.redData = res.data.records
        this.list[index].num = res.data.total
      })
    },
    //查看更多诚实守信红名单
    handelCheckRed() {
      this.dialogVisible2 = true
      this.pagination2.page = 1
      cssxhmd({
        TYSHXYDM: this.comInfo.shtyxydm,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.redMoreData = res.data.records
        this.pagination2.total = Number(res.data.total)
      })
    },
    //查看更多诚实守信红名单分页
    redChange(val) {
      this.pagination2.page = val
      cssxhmd({
        TYSHXYDM: this.comInfo.shtyxydm,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.redMoreData = res.data.records
      })
    },
    //社会法人表彰信息
    getSh() {
      this.loading3 = true
      let index = this.list.findIndex((item) => item.text == '社会法人表彰信息')
      shfrbz({ TYSHXYDM: this.comInfo.shtyxydm, pageNum: 1, pageSize: 2 }).then(
        (res) => {
          this.loading3 = false
          this.shData = res.data.records
          this.list[index].num = res.data.total
        }
      )
    },
    //社会法人表彰信息
    handelCheckRedTwo() {
      this.dialogVisible3 = true
      this.pagination3.page = 1
      shfrbz({
        TYSHXYDM: this.comInfo.shtyxydm,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.shMoreData = res.data.records
        this.pagination3.total = Number(res.data.total)
      })
    },
    //社会法人表彰信息分页
    redChangeTwo(val) {
      this.pagination3.page = val
      shfrbz({
        TYSHXYDM: this.comInfo.shtyxydm,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.shMoreData = res.data.records
      })
    },
    //行政奖励信息
    getXzjlInfo() {
      this.loading4 = true
      let index = this.list.findIndex((item) => item.text == '行政奖励信息')
      getXzjlInfo({ XZXDRDM: this.comInfo.shtyxydm, pageNum: 1, pageSize: 2 }).then(
        (res) => {
          this.loading4 = false
          this.xzjlData = res.data.records
          this.list[index].num = res.data.total
        }
      )
    },
    //行政奖励信息查看更多
    handelCheckXzjl() {
      this.dialogVisible4 = true
      this.pagination4.page = 1
      getXzjlInfo({
        XZXDRDM: this.comInfo.shtyxydm,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.xzjlMoreData = res.data.records
        this.pagination4.total = Number(res.data.total)
      })
    },
    //行政奖励信息分页
    xzjlPageChange(val) {
      this.pagination4.page = val
      getXzjlInfo({
        XZXDRDM: this.comInfo.shtyxydm,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.xzjlMoreData = res.data.records
      })
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    goAssignBlock(el, speed, index) {
      return;
      this.activeIndex = index
      let windowH = window.innerHeight //浏览器窗口高度
      let h = this.$refs[el].offsetHeight //模块内容高度

      let t = this.$refs[el].offsetTop //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2 //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop //滚动条距离顶部高度
      let currentTop = scrollTop //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId
      //采用requestAnimationFrame，平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向下滚动
          currentTop += speed
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向上滚动
          currentTop -= speed
        }
      }
      window.requestAnimationFrame(step)
    },
  },
}
</script>

<style scoped lang="scss">
.cursorCla {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cursorClaTwo {
  width: 426px !important;
}
.el-icon-document-copy {
  font-size: 14px;
  color: #4486f4;
  margin-left: 5px;
}
.containter {
  width: 100%;
  .step {
    ol.titt {
      // height: 320px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      position: fixed;
      top: 350px;
      right: 24px;
      z-index: 999;
    }
    .tittItem {
      margin-bottom: 10px;
    }
    ol.titt .button {
      width: 150px;
      margin: 0;
    }
    ol.titt .button.cur {
      background-color: #5591f5;
      color: #fff;
    }
  }
  .basicInfo {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
  }
  .basicInfo1 {
    .table {
      width: 100%;
      height: 340px;
      border-collapse: collapse;
      th,
      td {
        width: 238px;
        height: 56px;
        border: #ccc solid 1px;
      }
      th {
        background-color: #f2f9fe;
        width: 100px;
      }
      td {
        padding-left: 10px;
        text-align: left;
      }
      .jyfw {
        word-wrap: break-word; //自动换行
        word-break: break-all; //自动换行（兼容字母）
        overflow: hidden; //超出隐藏
        text-overflow: ellipsis; //溢出显示省略号
        display: -webkit-box;
        -webkit-line-clamp: 3; //显示3行
        -webkit-box-orient: vertical;
        line-height: 20px;
      }
    }
  }

  .basicInfo7 {
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.glqy {
  color: #4a8bf6;
  margin-left: 24px;
}
.glqy:hover {
  cursor: pointer;
}
.item {
  margin-top: 4px;
  margin-right: 16px;
}
</style>
<style>
.dialog {
  border-radius: 10px;
  padding-bottom: 50px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.myNote {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>